<template>
	<view>
		<view class="goods_box">
			<view class="goods_img">
				<image :src="goods_info.image"></image>
			</view>
			<view class="goods_info">
				<view class="u-line-2">{{goods_info.goods_name}}</view>
				<view class="goods_norms u-line-1">数量：{{goods_info.total_num}}；{{goods_info.goods_attr}}</view>
				<view class="price_box">
					<view style="margin-right: 20rpx;">¥{{goods_info.goods_price}}</view>
					<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
					color="#fff" :text="goods_info.goods_status_txt" 
					shape="circle" />
				</view>
			</view>
		</view>
		<view class="comment_box">
			<text>{{rate_txt}}</text>
			<u-rate @change="changeRate" :min-count="1" :size="40" 
				active-color="#ffba00" :count="5" v-model="rate_val"></u-rate>
			<view class="edit_comment">
				<u-input v-model="comment_val" type="textarea" :height="150" :auto-height="false" />
				<u-upload @on-choose-fail="onChooseFail" :width="180" :height="180" :before-remove="beforeRemove" ref="uUpload" :action="action" :auto-upload="false" 
					:file-list="fileList" :header="header" :formData="formData"
					del-bg-color="rgba(0,0,0,0)" del-color="#fa3534"
					:show-progress="false" :max-count="3" @on-list-change="onListChange" @on-Success="onSuccess">
				</u-upload>
			</view>
		</view>
		<u-button @click="submit" :custom-style="customStyle" shape="circle">发表评价</u-button>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {orderComment} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				goods_info:{},
				rate_txt:"好评",
				rate_val:5,
				comment_val:"",
				// 上传地址示例，非真实地址
				// #ifdef H5
				action: '/api/upload_image',
				// #endif
				// #ifndef H5
				action: 'https://wap.yunxingzhan.com/api/upload_image',
				//action: 'https://testwap.yunxingzhan.com/api/upload_image',
				// #endif
				header:{"Authori-zation":uni.getStorageSync('Authori-zation')},
				formData:{path:"commment"},
				// 预置上传列表
				fileList: [],
				lists: [], // 组件内部的文件列表
				customStyle:{
					background:'#20cbd4',
					color:'#fff',
					margin:'80rpx 40rpx'
				},
				order_id:"",
				fileids:[],//上传图片成功返回的图片id
				type:""//来源 0全部订单1待评论2订单详情
			}
		},
		onLoad(options){
			this.goods_info = JSON.parse(options.goodsInfo);
			this.order_id = options.order_id;
			this.type = options.type;
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			changeRate(value){
				if(value==5){
					this.rate_txt="好评";
				}else if(value==1){
					this.rate_txt="差评";
				}else{
					this.rate_txt="中评";
				}
			},
			onChooseFail(e) {
				 console.log(e);
			},
			beforeRemove(index, lists) {
				return true;
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
			},
			submit(){
				uni.showLoading({
					title:'保存中...'
				});
				//上传图片
				if(this.lists.length>0){
					this.$refs.uUpload.upload();
				}else{
					orderComment(this,{type:this.type,order_id:this.order_id,order_goods_id:this.goods_info.order_goods_id,content:this.comment_val,score:this.rate_val})
				}
				
			},
			onSuccess(data,index,lists,name){
				var fileid = [];
				this.fileids = this.fileids+data.data.file_id+",";
				if(this.lists.length == index+1){
					orderComment(this,{type:this.type,order_id:this.order_id,order_goods_id:this.goods_info.order_goods_id,content:this.comment_val,score:this.rate_val,image_id:this.fileids})
				}
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.goods_box{
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 20rpx 0;
		display: flex;
	}
	.goods_img{
		width: 200rpx;
		height: 200rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		margin-left: 10rpx;
		width: 500rpx;
	}
	.goods_norms{
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
		height: 50rpx;
	}
	.comment_box{
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
	}
	.comment_box text{
		margin-right: 15rpx;
	}
	.edit_comment{
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #f9fafb;
	}
</style>
